<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<div id="line" style="width: 800px ; height: 800px"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
<script>

    const lineOption = {

        title: {
            text: '合作厂商次数',
            subtext: ' Data From Mysql',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'bar'
            }
        ]
    };





    var lineDom = document.getElementById('line');
    var lineChart = echarts.init(lineDom);


    fetch("/stats/getbycustomer")
        .then(response => response.json())
        .then(res => {
            console.log('Response from backend:', res); // 打印返回的数据，确保数据结构正确
            if (res.code === 1) {
               const name= res.data.map(v =>v.name);
               lineOption.xAxis.data=name;


                const count= res.data.map(v =>v.count);
                lineOption.series[0].data=count;


                lineChart.setOption(lineOption);
            } else {
                console.error('Error:', res.msg);
            }
        })
        .catch(error => console.error('Error fetching data:', error));


</script>
</body>
</html>
